<template>
  <div class="h-full">

     <div v-for="(item,index) in list" :key="index">
       <PostItem :item="item"></PostItem>
     </div>
    <n-button ref="targetRef" v-if="list.length<itemCount" @click="handleMore" block>加载更多</n-button>
    <n-button v-else text block>已经到底</n-button>
  </div>
</template>

<script setup lang="ts">


import {PropType, ref, watch} from "vue";
import PostItem from "@/components/pc/item/PostItem.vue";
import {useElementVisibility} from "@vueuse/core";
defineProps({
  list: {
    type: Array as PropType<IPost[]>,
    default: () => []
  },
  itemCount:{
    type:Number,
    default:0
  }
})
const emits = defineEmits(['handleMore'])

const targetRef = ref(null)
const targetIsVisible = useElementVisibility(targetRef)

watch(targetIsVisible, () => {
  if (targetIsVisible.value) {
    emits('handleMore')
  }
})

const handleMore=()=>{
  emits('handleMore')
}




</script>

<style scoped>

</style>